<template>
  <div>
    <el-tabs v-model="activeName"
             @tab-click="handleClick">
      <el-tab-pane label="流水信息"
                   name="first">
        <el-table :data="streamList"
                  style="width: 100%">
          <el-table-column prop="userStreamId"
                           label="用户流水信息编号"
                           width="180">
          </el-table-column>
          <el-table-column prop="userStreamDate"
                           label="创建日期"
                           width="180">
          </el-table-column>
          <el-table-column prop="modeOfPaymentName"
                           label="支付方式"
                           width="180">
            <!-- <template slot-scope="scope">
              <p v-if="scope.row.modeOfPaymentName=='1'">微信支付</p>
              <p v-if="scope.row.modeOfPaymentId=='0'">支付宝支付</p>
            </template> -->
          </el-table-column>
          <el-table-column prop="userStreamMoney"
                           label="支付金额"
                           width="180">
          </el-table-column>

          <el-table-column prop="userStreamAccount"
                           label="支付账号"
                           width="180">
          </el-table-column>
          <el-table-column prop="userStreamToAccount"
                           label="收款账号"
                           width="180">
          </el-table-column>
          <el-table-column prop="userId"
                           label="用户ID"
                           width="180">
          </el-table-column>

          <el-table-column prop="userStreamDesc"
                           label="流水备注"
                           width="180">
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!--echarts-->
    <div>
      <div id="main"
           style="width: 600px; height: 400px"></div>
    </div>

  </div>

</template>

<script>
export default {
  data () {
    return {
      // tableData: [],
      activeName: 'second',
      echartsMoney: [],
      month: [],
      money: [],
      streamList: []
    };
  },

  methods: {
    loadechartsMoney () {
      this.$axios.get("userStreams/" + this.userId)
        .then(res => {
          this.echartsMoney = res.data.data.streamMoney;
          for (var obj in this.echartsMoney) {
            this.month.push(this.echartsMoney[obj].name);
            this.money.push(this.echartsMoney[obj].value)
          }
          this.getChar();

        }
        )
    },
    loadStream () {
      this.$axios.get("userStreams/findAll/" + this.userId)
        .then(res => {
          this.streamList = res.data.data.streamList;
        }
        )
    },

    getChar () {
      var myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      var option = {
        xAxis: {
          type: 'category',
          data: this.month
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.money,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    handleClick (tab, event) {
      console.log(tab, event);
    },

  },
  created () {
    this.userId = JSON.parse(sessionStorage.getItem("userId"));
    this.loadechartsMoney();
    this.loadStream();

  },

};
</script>